<template>
     <div class="search-bd">
         <div class="search-box">
            <i class="iconfont iconjiantou2" @click="toBack"></i>
            <i class="iconfont iconsearch"></i>
            <input type="text" v-model="keyword">
            <span class="search" @click="search">搜索</span>
         </div>
         <div class="searKeyContent" v-if="list.length > 0 ? false:true">
             <div class="search-word">
                <div class="history" v-if="historyList.length > 0 ? true:false">
                    <h5>历史记录</h5>
                    <div class="history-word">
                        <div class="history-item" v-for="(item,index) in historyList" :key="index" @click="clickedRecord(0,index)"><i class="iconfont iconpinglun-"></i>{{item}}</div>
                    </div>
                </div>
            </div>
            <div class="hot-search" v-if="recommendList.length > 0 ? true:false">
                <h5>热门搜索</h5>
                <div class="hot-word">
                    <div class="hot-item" v-for="(item,index) in recommendList" :key="index" @click="clickedRecord(1,index)">{{item}}</div>
                </div>
            </div>
         </div>
         <NewsItem :postData="item" v-for="item in list" :key="item.id"></NewsItem>
     </div>
</template>

<script>
import NewsItem from '../../components/NewsItem'
export default {
    data(){
        return{
            list:[],
            historyList:[],
            recommendList:['关晓彤','阿信','美女'],
            keyword:''
        }
    },
    components:{
        NewsItem
    },
    methods:{
        search(){
            if(!this.keyword){
                this.list = [];
                return;
            }
            if(!this.historyList.includes(this.keyword)){
               if(this.historyList.length > 4){
                   this.historyList.shift();
               }
               this.historyList.push(this.keyword);
               localStorage.setItem('historyList',JSON.stringify(this.historyList));
            }
            this.$axios({
                url:'/post_search',
                method:'get',
                params:{'keyword':this.keyword}
            }).then(res => {
                this.list = res.data.data;
            });
        },
        clickedRecord(number,index){
            if(number == 0){
                this.keyword = this.historyList[index];
            }else{
                this.keyword = this.recommendList[index];
            }
            this.search();
        },
        toBack(){
            if(this.list.length > 0){
                this.list = [];
            }else{
                this.$router.push('/');
            }
        }
    },
    mounted(){
        if(!localStorage['historyList']){
            localStorage.setItem('historyList',JSON.stringify(this.historyList));
        }else{
            this.historyList = JSON.parse(localStorage.getItem('historyList'));
        }
    }
}
</script>

<style lang="less" scoped>
.search-bd{
    padding-top:5.556vw;
    .search-box{
        position: relative;
        display: flex;
        box-sizing: border-box;
        height: 16.667vw;
        line-height: 11.111vw;
        padding:2.778vw 6.111vw;
        margin-bottom: 4.167vw;
        .iconjiantou2{
            margin-right: 3.333vw;
            color: #c0c0c0;
            font-size: 4.444vw;
        }
        .iconsearch{
            position: absolute;
            left: 16.667vw;
            top: 2.778vw;
            color: #c0c0c0;
            font-size: 4.444vw;
        }
        input{
            flex:1;
            height: 9.722vw;
            text-indent: 9.722vw;
            border: 1px solid #D7D7D7;
            border-radius: 9.722vw/2;
            font-size: 3.333vw;
            color: #c0c0c0; 
        }
        .search{
            margin-left: 10px;
            font-size: 4.444vw;
            color: #c0c0c0;
        }
    }
    .search-word{
        padding: 0 6.111vw;
        margin-bottom: 4.167vw;
        .history{
            h5{
                padding:1.389vw 0;
                font-size: 3.889vw;
                color: #333;
            }
            .history-word{
                .history-item{
                    height: 11.111vw;
                    line-height: 11.111vw;
                    font-size: 3.333vw;
                    color: #505050;
                    border-bottom: 1px solid #D7D7D7;
                    .iconfont{
                        padding-right: 1.944vw;
                        font-size: 3.889vw;
                        color: #ffc0cb;
                    }
                }
            }
        }
    }
    .hot-search{
        padding: 0 6.111vw;
        h5{
            padding:1.389vw 0;
            font-size: 3.889vw;
            color: #333;
        }
        .hot-word{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin-top:2.778vw;
            .hot-item{
                padding:1.389vw 2.222vw;
                font-size: 3.889vw;
                color: #505050;
                border: 1px solid #CCCCCC;
                border-radius: 4.167vw;
                color: #505050;
                margin:0 2.222vw 2.222vw 0;
            }
        }
    }
}
</style>